@charset "utf-8";

$font-12: 12px;
$font-14: 14px;
$font-16: 16px;
$font-18: 18px;
$font-20: 20px;
$font-22: 22px;
$font-24: 24px;

$color-01: #171717;
$color-02: #515151;
$color-03: #909090;
$color-04: #c1c1c1; //(输入框边框颜色)
$color-05: #eeeeee; //(背景色)
$color-06: #499af5;
$color-07: #ffb30e;
$color-08: #e43f3f;
p,h1,h2,h3,h4,h5,h6{
  margin: 0;
}

//面包屑导航
.breadcrumb > li {
  float: left;
  color: $color-03;
  a {
    color: $color-03
  }
}
.breadcrumb > li + li:before {
  color: $color-03;
  content: ">";
  padding: 0 5px;
}

//黑色背景面包屑
.breadcrumb-dar >li{
  color: #fff;
  a {
    color: #fff
  }
}




//首页
#tribe-home {
  .container{
    padding: 0;
  }
  /**轮播图**/
  .carousel-inner {
    img {
      width: 100%;
      height: 280px;
    }
  }
  /** 热门部落 **/
  [data-thome="hot-tribe"]{
    padding-left:20px;

    background-color: #fff ;
    h2{
      line-height: 42px;
    }
    div{
      float: left;
    }
    [data-thome="hot-left"] img{
      width: 326px;
      height:206px;
    }
    [data-thome="hot-center"]{
      width: 422px;
      padding: 0 20px;
      ul{
        text-align: center;
        border-bottom: 1px solid $color-04;
        padding-bottom: 7px;
        li{
          padding-top: 20px;
          float: left;
          width: 33.3%;
          b{
            font-size: 24px;
            line-height: 24px;
            color: $color-02;
          }
          p{
            padding: 15px 0;
            font-size: 14px;
            color: $color-02;
            margin: 0;
          }
        }
        [data-thome="hotcenli"]{
          border-left:1px solid $color-04 ;
          border-right:1px solid $color-04 ;
        }
      }
      ul:after{
        content: '';
        display: table;
        clear: both;
      }
      h3{
        line-height: 42px;
        font-size: 16px;
        color: $color-02;
      }
      p{
        color: $color-03;
        font-size: 14px;

      }
    }
    [data-thome="hot-right"]{
      border-left: 1px solid $color-04;
      float: right;
      padding: 0 34px;
      margin-bottom: 30px;
      text-align: center;
      button{
        height: 93px;
        width:163px;
        font-weight: bold;
        background-color: $color-07;
        border-radius: 4px;
        color: $color-01;
        b{
          background-image: url("../../../images/pc/version1.1/icon/icon_pen.png");
          width: 31px;
          height:31px;
          display: inline-block;
          vertical-align: middle;
          margin-right:10px;
        }
      }
      p{
        margin-top: 30px;
        font-size: 14px;
      }
    }

  }
  [data-thome="hot-tribe"]:after{
    content: '';
    display: table;
    clear: both;
  }
  //页脚图片
  footer{
    margin:40px 0;

    img{
      width: 1000px;
      height: 230px;

    }
  }
}



/** 部落首页 + 漫画部落页面 **/
/** 部落推荐列表 **/
.tribe-list-box{
  padding: 0 20px;
  padding-top:20px;
  .tribe-list-tab{
    color: $color-02;
    a{
      font-size: 14px;
      color: $color-03;
      float: right;
      &:hover{
        color: $color-07;
      }
    }
  }
  .tribe-list{
    width: 972px;
  }
  .tribe-list:after{
    clear: both;
    content: "";
    display: table;
  }
  .tribe-list-li{
    width: 320px;
    margin-top:16px;
    margin-right: 4px;
    border: 1px solid transparent;
    border-bottom-color:$color-04;
    position: relative;
    float: left;
    padding-top: 5px;
    .tribe-list-con{
      width: 310px;
      margin: 0 auto;
      img{
        width:310px;
        height:230px;
      }
      h3{
        color: $color-02;
        padding-top: 15px;
        padding-bottom: 12px;
      }
      >p{
        color: $color-03;
        padding-bottom: 14px;
        font-size: 14px;

      }
      .tribe-list-foot{
        font-size: 12px;
        padding-bottom: 20px;
        p{
          color: $color-07;
          margin-right: 16px;
          display: inline-block;
        }
        p b{
          width:18px;
          height: 14px;
          display: inline-block;
          margin-right: 5px;

        }
        .tribe-list-groupicon b{
          background-image: url("../../../images/pc/version1.1/icon/icon_group.png");
        }
        .tribe-list-zanicon b{
          background-image: url("../../../images/pc/version1.1/icon/icon_zan.png");
        }
        .tribe-list-clockicon b{
          background-image: url("../../../images/pc/version1.1/icon/icon_clock.png");
        }
      }

    }
    a{
      position: absolute;
      height: 372px;
      top:0;
      width: 100%;
      display: inline-block;
    }
    &:hover{
      background-color: #fff;
      border-color: $color-04;;
    }
  }
}


/** 漫画部落页面 条件选择 **/
.searchtab{
  height:130px;
  padding: 50px;
  background-color: #fff;
  .container{
    padding: 0 20px;
    text-align: center;
    .searchtab-con{
      margin-top: 15px;
      display: inline-block;
      input{
        height: 50px;
        width: 500px;
        border: 1px solid $color-04;
        float: left;
        padding: 5px;
        padding-left: 10px;
        font-size: 14px;
      }
      button{
        width: 120px;
        float: left;
      }
      &:after{
        display: table;
        content: "";
        clear: both;
      }
    }
    /**  下拉按钮  **/
    [data-webdemand="dropdownbtn"] {
      position: relative;
      padding-bottom: 10px;
      margin-bottom: 20px;
      text-align: center;
      button {
        color: $color-03;
        background-color: transparent;
        font-size: 16px;
        b {
          width: 22px;
          height: 14px;
          display: inline-block;
          vertical-align: middle;
          background-image: url("../../../images/pc/icon/icon_dropdown.png");
        }
      }
    }
    .dropdown-menu {
      [data-webdemand="triangle"] {
        position: absolute;
        top: -9px;
        left: 40%;
        border: 5px solid transparent;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;;
        border-bottom-color: #fff;
      }
      li {
        a {
          font-size: 12px;
        }
      }
    }
  }
}

//漫画部落推荐 面包屑
#tribe-cartoon{
  [data-thome="tribe-breadbox"]{
    font-size: 14px;
    &:after{
      display: table;
      content: "";
      clear: both;
    }
  }
}


